<template>
  <div class="global-header">
    <div class="left">
      <img src="@/assets/logo.svg" alt="Logo" class="logo" />
      <h1 class="title">AI智能云盘</h1>
      <el-menu mode="horizontal" :ellipsis="false" class="menu">
        <el-menu-item v-for="item in visibleRoutes" :key="item.path" :index="item.path" :active="selectedKeys" @click="doMenuClick(item.path)">{{ item.name }}</el-menu-item>
      </el-menu>
    </div>
    <div class="right">
      <template v-if="loginStatus">
        <el-dropdown trigger="hover">
          <div class="user-info"><el-avatar :size="38" :src="getAvatarUrl()" /><span class="username">{{ loginUser.username }}</span></div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToPersonalHome">个人主页</el-dropdown-item>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <template v-else>
        <el-button type="primary" @click="login('/user/login')">登录</el-button>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import checkAccess from "@/access/checkAccess";
import ImageUpload from "@/components/common/ImageUpload.vue";
import { useLoginUserStore } from "@/store/user";
import { ElMessage } from "element-plus";
import { computed, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { routes } from "../router/routes";
import {base_url_main} from "@/api/routerToMain";

const router = useRouter();
const { loginStatus, logout, loginUser, fetchLoginUser } = useLoginUserStore();

const login = (key: string) => {
  window.location.href = base_url_main + "login";
};
const doMenuClick = (key: string) => { router.push({ path: key }); };
const handleLogout = async () => {
  await logout();
  localStorage.clear();
  window.location.href = base_url_main + "login";
};
const selectedKeys = ref(["/"]);
router.afterEach((to) => { selectedKeys.value = [to.path]; });

const visibleRoutes = computed(() => routes.filter(item => !item.meta?.hideInMenu && checkAccess(loginUser, item.meta?.access as number)));
const goToPersonalHome = () => {
  window.location.href = base_url_main ; // 假设个人主页路径为"personal"，可根据实际修改
};
const getAvatarUrl = () => localStorage.getItem('headImg') || `https://api.dicebear.com/9.x/micah/svg?seed=${loginUser.id || Math.random().toString(36).substring(2, 15)}`;
</script>

<style scoped>
.global-header{display:flex;justify-content:space-between;align-items:center;padding:0 16px;height:60px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.1);}
.left{display:flex;align-items:center;}
.logo{width:40px;height:40px;margin-right:8px;}
.title{font-size:18px;font-weight:bold;color:#333;margin-right:16px;}
.menu{border-bottom:none;}
.right{display:flex;align-items:center;}
.user-info{display:flex;align-items:center;cursor:pointer;padding:5px 10px;border-radius:12px;transition:background-color 0.3s;}
.user-info:hover{background:#f5f7fa;}
.username{margin-left:8px;font-size:14px;color:#808080cc;font-weight:500;}
:deep(.el-dropdown){color:inherit;}
:deep(.el-dropdown:focus-visible){outline:none;}
:deep(.el-popper){border-radius:8px;}
:deep(.el-dropdown-menu__item){padding:8px 20px;}
@media screen and (max-width:768px){
  .title{display:none;}
  .logo{margin-right:5px;}
  :deep(.el-menu-item){padding:0 12px !important;font-size:14px;}
  .username{display:none;}
  .user-info{padding:3px;}
}
</style>
